<script setup>
import { ref, nextTick, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts'
import api from '@/api'
import { Message, Modal } from '@arco-design/web-vue'

const $route = useRoute()
const $router = useRouter()
const plan_id = $route.query.plan_id || null
const id = $route.query.id || null
const title = ref('')
const contentObj = ref({
  score: 0,
  content: [],
})
const echartsPieStatus = ref(true)
const currentContent = ref(null)
const addSon = (rowIndex) => {
  data.value[rowIndex].son.push({
    wenti: '问题2',
    yaodian: '要点1',
    putong: 1,
    lianghao: 3,
    youxiu: 5,
  })
}

const deleteSon = (rowIndex, index) => {
  data.value[rowIndex].son.splice(index, 1)
}

const addItem = () => {
  data.value.push({
    bankuai: '',
    son: [
      {
        wenti: '',
        yaodian: '',
        putong: 1,
        lianghao: 3,
        youxiu: 5,
      },
    ],
  })
}

const deleteItem = (rowIndex) => {
  data.value.splice(rowIndex, 1)
}

const toJump = (url) => {
  console.log('router', $router.push(url))
  $router.push(url)
}

const form = reactive({
  bumen: '',
  gangwei: '',
  renshu: '',
  yaoqiu: '',
  muban: '',
  lunshu: '',
})

const detailInfo = ref({})

const handleSubmit = (data) => {
  console.log(data)
}

const goBack = () => {
  $router.go(-1)
}

const handleAdmission = (department) => {
  Modal.confirm({
    title: '提示',
    content: '您确定录取该面试人员吗？',
    bodyStyle: 'text-align:center',
    onBeforeOk: async () => {
      console.log('录取')
      // await api.delete('departments/' + department.id)
      // TODO 检查状态值
      setStatus(2)
      // getListData()
    },
  })
}

const handleEliminate = (department) => {
  Modal.confirm({
    title: '提示',
    content: '您确定淘汰该面试人员吗？',
    bodyStyle: 'text-align:center',
    onBeforeOk: async () => {
      console.log('淘汰')
      // await api.delete('departments/' + department.id)
      setStatus(1)
      // getListData()
    },
  })
}

const openFileUrl = (url) => {
  if (!url) {
    Message.error('文件不存在')
    return
  }
  Modal.confirm({
    title: '提示',
    content: '是否要下载简历文件？',
    bodyStyle: 'text-align:center',
    onOk: async () => {
      window.open(url)
    },
  })
}

const setStatus = async (status) => {
  const res = await api.post('/recruit/userPassRecruit', {
    recuit_plan_id: plan_id,
    application_worker_id: id,
    type: status,
  })
  if (res.code === 200) {
    Message.success('设置成功')
    goBack()
  } else {
    Message.error(res.message)
  }
}

const getList = async () => {
  let url = null
  if (plan_id) {
    url = `/recruit/userInterviewList?recuit_plan_id=${plan_id}&application_worker_id=${id}`
  } else {
    url = `/recruit/interviewRecord?reservation_id=${id}`
  }
  const res = await api.get(url)
  detailInfo.value = res.data
  selectContentList(0)
}

const selectContentList = async (index) => {
  var obj = plan_id ? detailInfo.value.record[index] : detailInfo.value.template
  contentObj.value = obj
  currentContent.value = index
  echartsPieStatus.value = obj.score
  if (obj.score) {
    setTimeout(() => {
      echartsPieInit()
    }, 100)
  }
}

const getTotal = (record) => {
  let total = 0
  let score = 0
  record.forEach((item) => {
    total += Number(item.excellent || 0)
    switch (item.scoreType) {
      case 1:
        score = Number(item.ordinary || 0)
        break
      case 2:
        score = Number(item.good || 0)
        break
      case 3:
        score = Number(item.excellent || 0)
        break
      default:
        score = 0
        break
    }
  })
  return score + '/' + total
}

getList()

const echartsPieInit = async () => {
  var obj = contentObj.value
  var chartDom = document.getElementById('echarts_pie')
  var myChart = echarts.init(chartDom)
  var data = []
  for (const item of obj.content) {
    var score = 0
    for (const items of item.son) {
      score = items.score
    }
    data.push({
      value: score,
      name: item.plate_name,
      // itemStyle: { color: '#57BEF8' },
    })
  }
  var option = {
    title: {
      // text: '8分',
      text: obj.score + '分',
      top: '16%',
      left: '62%',
      textStyle: {
        fontSize: 30,
      },
    },
    tooltip: {
      trigger: 'none',
      show: false,
      triggerOn: 'none',
    },
    legend: {
      type: 'scroll',
      top: '60%',
      left: '62%',
      icon: 'circle', // 设置图例为圆点
      orient: 'vertical',
      selectedMode: false,
    },
    series: [
      {
        name: '得分',
        type: 'pie',
        radius: ['60%', '100%'],
        center: ['26%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 0,
          borderColor: '#fff',
          borderWidth: 0,
        },
        label: {
          position: 'outer',
          formatter: '{cStyle|{c}}',
          backgroundColor: '#fff',
          borderRadius: 50,
          width: 30,
          height: 30,
          rich: {
            cStyle: {
              fontSize: 18,
              fontWeight: 'bold',
              align: 'center',
              lineHeight: 36,
            },
          },
        },
        labelLine: {
          length: -35,
          show: true,
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        // data: [
        //   { value: 5, name: '基本情况', itemStyle: { color: '#57BEF8' } },
        //   { value: 3, name: '工作经验', itemStyle: { color: '#FB9515' } },
        // ],
        data,
        silent: true, // 不可触摸
      },
    ],
  }

  option && myChart.setOption(option)
}

nextTick(() => {
  // echartsPieInit()
})
</script>

<template>
  <div class="page">
    <div @click="goBack"
         class="btn_back">
      <icon-left />返回
    </div>

    <div>
      <div class="body_left">
        <div class="member_cell">
          <div class="member_avatar">
            <img :src="detailInfo.worker_image"
                 alt="">
          </div>
          <div class="member_info">
            <div class="name hang1">{{detailInfo.worker_name}}</div>
            <!-- <div class="desc"> | 1-3年工作经验 | 本科</div> -->
            <!-- <div class="status">离职-随时到岗</div> -->
          </div>
          <div class="member_extra_info">
            <!-- <div>
              <div>期望薪资</div>
              <div>5000+</div>
            </div> -->
            <div>
              <div>联系电话</div>
              <div>{{detailInfo.worker_mobile}}</div>
            </div>
            <div>
              <div>联系邮箱</div>
              <div>{{detailInfo.worker_email}}</div>
            </div>
            <div>
              <div>渠道</div>
              <div>{{detailInfo.channel}}</div>
            </div>
          </div>
          <div @click="openFileUrl(detailInfo.worker_biographical_notes)"
               class="btn_downLoad">下载简历</div>
        </div>

        <!-- <div class="yujing_cell">
          <div class="title">录取预警</div>
          <div class="desc">本轮面试需注意的事项：录取预警录取预警录取预警录取预警录取预警录取预警录取预警</div>
        </div> -->

        <div class="interview_body">
          <div v-if="plan_id"
               class="interview_body_left">
            <div @click="selectContentList(index)"
                 v-for="(item, index) in detailInfo.record"
                 :key="index"
                 class="interview_cell"
                 :class="{interview_cell_active: currentContent==index}">
              <div class="title">>>{{item.number}}</div>
              <div class="time mb5">预约时间：{{item.reservation_time}}</div>
              <div class="time">实际时间：{{item.interview_time}}</div>
              <div class="mark">备注：{{ item.interview_worker_remarks }}</div>
            </div>
          </div>

          <div v-else
               class="interview_body_left">
            <div class="interview_cell interview_cell_active">
              <div class="title">>>{{contentObj.number}}</div>
              <div class="time mb5">预约时间：{{detailInfo.reservation_time}}</div>
              <div class="time">实际时间：{{detailInfo.interview_time}}</div>
              <div class="mark">备注：{{ detailInfo.interview_worker_remarks }}</div>
            </div>
          </div>

          <div class="table_body">
            <div class="table_head">
              <div class="w1">问题及考核要点</div>
              <div class="w2">面试回答</div>
              <div class="w3">得分</div>
            </div>
            <div class="table_container"
                 v-if="contentObj.content">
              <div class="table_th"
                   v-for="(items,indexs) in contentObj.content"
                   :key="indexs">
                <div class="weidu">{{items.plate_name}}（{{ getTotal(items.son) }}）</div>

                <div class="flex mb10" v-for="(itemss,indexss) in items.son"
                     :key="indexss">
                  <div class="w1">
                    <div class="wenti">{{itemss.problem}}<span>（{{itemss.examine}}）</span></div>
                  </div>
                  <div class="w2">
                    <!-- <div class="kong"></div> -->
                    <div class="answer">
                      <!-- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA -->
                       {{ itemss.answer }}
                    </div>
                  </div>
                  <div class="w3">
                    <div class="flex at_c"
                         style="height: 20px">
                      <a-progress :percent="itemss.score / itemss.excellent"
                                  color="#5695FB"
                                  track-color="#eeeeee"
                                  stroke-width="10"
                                  :style="{width:'100%'}">
                        <template v-slot:text="scope">
                          {{ itemss.score }}
                        </template>
                      </a-progress>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="table_container"
                 v-else>
              <div class="pt50 pb50">
                <a-empty description="未进入该环节" />
              </div>
            </div>

            <div style="width: 100%;height: 50px;"></div>
          </div>

          <div class="clear"></div>
        </div>
      </div>

      <div class="body_right">
        <div class="block_cell">
          <div class="title">岗位信息</div>
          <div class="block_body">
            <div class="info_cell flex">
              <div>招聘部门：</div>
              <div>{{detailInfo.department_name}}</div>
            </div>
            <div class="info_cell flex">
              <div>岗位名称：</div>
              <div>{{detailInfo.post_name}}</div>
            </div>
            <div class="info_cell">
              <div>岗位要求：</div>
              <div class="mt15">{{ detailInfo.post_ask }}</div>
            </div>
          </div>
        </div>

        <div class="block_cell">
          <div class="title">整体评分</div>
          <div class="block_body">
            <div v-if="echartsPieStatus"
                 id="echarts_pie"></div>
            <div v-else
                 id="echarts_pie"
                 class="flex at_c jc_c">
              暂无评分
            </div>
            <div v-if="plan_id"
                 class="btns">
              <div v-if="[0, 1, 2, 4].includes(detailInfo.status)"
                   @click="handleAdmission"
                   class="btn_luqu">录取</div>
              <div v-if="[0, 1, 4].includes(detailInfo.status)"
                   @click="handleEliminate"
                   class="btn_taotai">淘汰</div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
  box-sizing: border-box;
  padding: 20px 24px;
}

.btn_back {
  width: 104px;
  height: 37px;
  background: #5695fb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding-left: 24px;
  font-weight: 400;
  font-size: 15px;
  color: #ffffff;
  user-select: none;
  cursor: pointer;
  margin-bottom: 20px;
}

.body_left {
  float: left;
  width: calc(100% - 324px);
}

.body_right {
  float: right;
  width: 300px;
}

.clear {
  clear: both;
}

.member_cell {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 26px 180px 26px 10px;
  display: flex;
}

.member_avatar {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  background-color: #f6f6f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.member_avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.member_info {
  width: 165px;
  flex-shrink: 0;
  margin-right: 50px;
}

.member_info .name {
  font-weight: 400;
  font-size: 24px;
  color: #000000;
  margin: 11px 0 13px;
}

.member_info .desc {
  font-weight: 400;
  font-size: 14px;
  color: #888888;
  margin-bottom: 10px;
}

.member_info .status {
  width: 100%;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5695fb;
  border-radius: 10px;
  font-weight: 400;
  font-size: 15px;
  color: #ffffff;
}

.member_extra_info {
}

.member_extra_info > div {
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  display: flex;
}

.member_extra_info > div > div:first-child {
  width: 60px;
  text-align: justify;
  flex-shrink: 0;
  margin-right: 3px;
}

.member_extra_info > div > div:first-child::after {
  content: '';
  display: inline-block;
  width: 100%;
}

.member_extra_info > div > div:last-child {
  word-break: break-all;
  box-sizing: border-box;
  padding-left: 8px;
  position: relative;
}

.member_extra_info > div > div:last-child::before {
  content: ':';
  position: absolute;
  left: -2px;
}

.btn_downLoad {
  position: absolute;
  top: 67px;
  right: 0;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  box-sizing: border-box;
  padding: 12px 28px;
  border-top: 1px solid #898989;
  border-left: 1px solid #898989;
  border-bottom: 1px solid #898989;
  background-color: #eeeeee;
  border-radius: 25px 0 0 25px;
  user-select: none;
  cursor: pointer;
}

.yujing_cell {
  width: 100%;
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 26px 26px;
}

.yujing_cell .title {
  font-size: 16px;
  color: #fb9515;
  margin-bottom: 17px;
  font-weight: bolder;
}

.yujing_cell .desc {
  font-weight: 400;
  font-size: 13px;
  color: #000000;
}

.block_cell {
  width: 100%;
  border-radius: 10px;
}

.block_cell:not(:first-child) {
  margin-top: 20px;
}

.block_cell .title {
  width: 100%;
  height: 43px;
  background: linear-gradient(66deg, #8bb6fd, #eaf5ff);
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 23px;
  border-radius: 10px 10px 0 0;
}

.block_body {
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
  padding: 20px 24px;
}

.block_body .info_cell {
  margin-bottom: 10px;
}

.block_body .info_cell > div:first-child {
  font-weight: bolder;
  font-size: 14px;
  color: #000000;
}

.block_body .info_cell > div:last-child {
  font-weight: 400;
  font-size: 14px;
  color: #000000;
}

#echarts_pie {
  width: 100%;
  height: 120px;
  /* background-color: #ffadad; */
}

.block_body .btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.block_body .btns > div {
  width: 83px;
  height: 37px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}

.block_body .btn_luqu {
  font-weight: 400;
  font-size: 15px;
  color: #ffffff;
  background-color: #5695fb;
  border: 1px solid #5695fb;
  margin-right: 18px;
}

.block_body .btn_taotai {
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  background-color: #f6f6f6;
  border: 1px solid #a7a7a7;
}

.interview_body {
  margin-top: 20px;
}

.interview_body_left {
  float: left;
  width: 300px;
}

.interview_cell {
  width: 300px;
  background-color: #fff;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.interview_cell_active {
  position: relative;
  border-color: #5695fb;
}

.interview_cell_active::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -15px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 15px solid #5695fb;
  border-bottom: 10px solid transparent;
}

.interview_cell .title {
  font-weight: bold;
  font-size: 15px;
  color: #666666;
  margin-bottom: 16px;
}

.interview_cell_active .title {
  color: #5695fb;
}

.interview_cell .time {
  font-weight: 400;
  font-size: 13px;
  color: #666666;
  box-sizing: border-box;
  padding: 4px 6px;
  background-color: #f6f6f6;
  display: inline-flex;
}

.interview_cell .mark {
  font-weight: 400;
  font-size: 13px;
  color: #666666;
  margin-top: 20px;
}

.table_body {
  float: right;
  width: calc(100% - 324px);
  border-radius: 10px;
  background-color: #fff;
}

.table_body .table_head {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #cfcbcb;
}

.table_body .w1 {
  width: 40%;
  box-sizing: border-box;
  padding: 0 26px;
}

.table_body .w2 {
  width: 30%;
  text-align: center;
}

.table_body .w3 {
  width: 30%;
  text-align: center;
}

.table_container {
  box-sizing: border-box;
  padding: 0 26px;
}

.table_container .w1 {
  padding: 0 20px 0 0;
}

.table_container .w2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 20px;
}

.table_container .w3 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 20px;
}

.table_th {
  /* display: flex; */
  box-sizing: border-box;
  padding: 20px 0;
  border-bottom: 1px dashed #7b7575;
}

.table_th .weidu {
  font-weight: bold;
  font-size: 13px;
  color: #3b81f3;
  margin-bottom: 10px;
}

.table_th .wenti {
  font-weight: 400;
  font-size: 13px;
  color: #000000;
  word-break: break-all;
}

.table_th .wenti span {
  color: #9f9898;
}

.table_th .kong {
  width: 100%;
  height: 18px;
}

.table_th .answer {
  width: 100%;
  border: 1px solid #dadada;
  /* height: 20px; */
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
}

.pt50 {
  padding-top: 50px;
}

.pb50 {
  padding-bottom: 50px;
}
</style>